document.getElementById("messagePage").innerHTML = `
<style>

* {
    box-sizing: border-box;
    outline: none;
}

p {
    margin: .5em;
    word-break: break-all;
}

html, body {
    height: 100vh; /* 确保高度充满视口 */
    margin: 0;
}
.container {
    position: relative;
    width: 100%;
    height: 90vh;
    margin: auto;
}

.content {
    width: 100%;
    height: 100vh;
    /* border: 1px solid #ccc; */
  
}

.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
   
}

.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 10px solid #ccc;
    overflow: auto;
    /* background-color: #F1F2F3; */
    background-color:transparent;
    border-radius: 20px;

}
.content-text p{
    padding: 5px;
    border-radius: 5px;
    
}
.content-input {
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    padding: 15px;
    background-color:transparent;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    width: 300px;
    
   
    /* border: 1px solid #ccc;
    border-radius: 20px; */
}

 #send.launch {
    animation: launch 2s forwards;
  }
  
  @keyframes launch {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-50px) rotate(45deg);
    }
    50% {
      transform: translateY(-150px) rotate(90deg);
    }
    75% {
      transform: translateY(-200px) rotate(135deg);
    }
    100% {
      transform: translateY(-300px) rotate(180deg);
    }
}
.content-input input {
    height: 35px;
    width: 70%;
    padding: 2px;
    border-radius: 10px;
    background-color:transparent;
    border: 1px solid #fff;
}
input::placeholder{
    text-indent: 1em;
    color: #fff;

    
}

/* .content-input input ::-webkit-input-placeholder{
    color: #fff;
}
.content-input input :-moz-placeholder{
    color: #fff;
}
.content-input input :-ms-input-placeholder{
    color: #fff;
} */
.content-input button {
    height: 35px;
    padding: 3px 10px;
    border: none;
    border-radius: 10px;
    background-color:transparent;
    color: #fff;
    border: 1px solid #fff;
}
.content-input button:hover{
    background-color: hsl(186, 78%, 61%);
}
html{
    background: url('../images/bg1.png');
    background-size: cover;
    background-attachment: fixed;
}


</style>
 <div class="container">
        <div class="content-input">
            <input id="text" placeholder="请留下你的nice idea"  type="text">
            <button id="send"><span id="sendicon">🚀</span>发送</button>
        </div>
        <div id="content" class="content"></div>
    </div>

`;
(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector('#' + id);
            if (this.dom.style.position == '' || this.dom.style.position == 'static') {
                this.dom.style.position = 'relative';
            }
            this.dom.style.overflow = 'hidden';
            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }

        shoot(text) {
            let div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.left = this.domWidth + 'px';
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
            div.style.whiteSpace = 'nowrap';
            div.style.color = '#' + Math.floor(Math.random() * 256).toString(10);
            div.innerText = text;
            this.dom.appendChild(div);

            let roll = (timer) => {
                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;
                let left = div.offsetLeft;
                let rect = div.getBoundingClientRect();
                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {
                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + 'px';
                    }
                    requestAnimationFrame(roll);
                }
            };
            roll(50 * +Math.random().toFixed(2));
        }
    }

    let barrage = new Barrage('content');

    function appendList(text) {
        let p = document.createElement('p');
        p.innerText = text;
        document.querySelector('#content-text').appendChild(p);
    }

    document.querySelector('#send').onclick = () => {
        let text = document.querySelector('#text').value;
        barrage.shoot(text);

        appendList(text);
    };

    const textList = ['弹幕', '666', '233333333', 'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular', '测试弹幕效果'];

    //定时循环显示弹幕
    let index = 0;
    setInterval(() => {
        barrage.shoot(textList[index]);
        appendList(textList[index]);
        index = (index + 1) % textList.length; // 循环播放
    }, 1000); // 每隔 1 秒发射一条弹幕
})();
document.getElementById("send").addEventListener("click", function() {
    this.classList.add("launch");
    
    // 动画结束后，可以移除类以便再次触发
    setTimeout(() => {
      this.classList.remove("launch");
    }, 2000); // 动画时长为2秒
  });
  
